import { Button, Form, Input } from "antd-mobile";
import { AccountType } from "../types/user";
import { userLogin } from "../api/user";
import { useDispatch } from "react-redux";
import { initUserInfo } from "../store/features/user";
import { useNavigate } from "react-router-dom";
export interface ILoginProps {}

export default function Login(props: ILoginProps) {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const onFinish = (values: AccountType) => {
    console.log(values);
    userLogin(values).then((res) => {
      console.log(res);
      dispatch(initUserInfo(res.data)); //触发状态机存储用户数据
      navigate("/mine");
    });
  };
  let initData = {
    username: "张三丰",
    password: "123",
  };
  return (
    <Form layout="horizontal" onFinish={onFinish} initialValues={initData}>
      <Form.Item label="用户名" name="username">
        <Input placeholder="请输入用户名" clearable />
      </Form.Item>
      <Form.Item label="密码" name="password">
        <Input placeholder="请输入密码" clearable />
      </Form.Item>
      <Button color="primary" block type="submit">
        登录
      </Button>
    </Form>
  );
}
